<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="form"
      class="searchForm bg-gray flex flex-wp flex-a-c"
      size="small"
    >
      <el-form-item label="角色名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-button size="small" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="editRole()"
        >新建角色</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pageInfo.pageindex - 1) * pageInfo.pagesize }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="角色名称" align="center">
      </el-table-column>
      <el-table-column
        prop="description"
        label="角色说明"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            round
            @click="editRole(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="primary"
            round
            @click="memberView(scope.row)"
            >成员查看</el-button
          >

          <el-button
            size="mini"
            type="success"
            round
            @click="roleAuthorization(scope.row)"
            >角色授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="roleEdit.tid ? '新建角色' : '编辑角色'"
      :visible.sync="roleVisible"
    >
      <el-form :model="roleEdit" label-width="200px">
        <el-form-item label="角色名称" required>
          <el-input
            v-model="roleEdit.name"
            autocomplete="off"
            type="text"
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="角色说明">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="roleEdit.description"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="roleVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="roleSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="角色授权"
      :visible.sync="roleAuthorVisible"
      class="roleMenuAuthor"
    >
      <el-row>
        <el-col :span="10" :offset="1">
          <el-tree
            ref="menu1"
            :data="submenu1"
            show-checkbox
            node-key="key"
            :default-checked-keys="choiceMenu1"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :props="defaultProps"
          >
          </el-tree>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-tree
            :data="submenu2"
            ref="menu2"
            show-checkbox
            node-key="key"
            :default-checked-keys="choiceMenu2"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :props="defaultProps"
          >
          </el-tree>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="roleAuthorVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="roleAuthorSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="成员查看"
      :visible.sync="userListVisible"
      width="80%"
    >
      <el-table
        border
        ref="memberTable"
        :data="memberTableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="realname" label="账号名称" align="center">
        </el-table-column>
        <el-table-column prop="username" label="登录账号" align="center">
        </el-table-column>
        <el-table-column prop="roleName" label="角色" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">{{
            scope.row.locked == 0 ? '正常' : '禁用'
          }}</template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>
      <div class="text-c margin-t-d">
        <el-pagination
          @current-change="getMemberList"
          :current-page.sync="memberPageInfo.pageindex"
          :page-size="memberPageInfo.pagesize"
          background
          layout="total,prev, pager, next, jumper"
          :total="memberPageInfo.total"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name:'roleList',
  data() {
    return {
      form: {
        name: ''
      },
      //搜索条件
      tableData: [], //表格数据
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0
      }, //页码
      memberTableData: [], //表格数据
      memberPageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0
      }, //页码
      qdForm: {},
      roleEdit: {
        name: '',
        description: ''
      }, //角色编辑
      defaultProps: {
        children: 'children',
        label: 'name'
      }, //树形组件展示字段
      topMenuKey: [], //一级菜单列表
      submenu1: [], //菜单列表1
      submenu2: [], //菜单列表2
      roleVisible: false, //角色编辑弹窗
      roleAuthorVisible: false, //角色授权弹窗
      userListVisible: false, //用户查看弹窗
      choiceData: {}, //编辑中角色数据
      choiceMenu1: [],
      choiceMenu2: []
    };
  },
  beforeMount() {
    this.form.name = this.$route.query.name || '';
    for (let index in this.$store.state.menuList) {
      let item = this.$store.state.menuList[index];
      if (index % 2 == 0) {
        this.submenu1.push(item);
      } else {
        this.submenu2.push(item);
      }
      if (item.children&&item.children.length!=0) {
        this.topMenuKey.push(item.key);
      }
    }
    this.search();
  },
  methods: {
    search() {
      this.qdForm = { ...this.form };
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0
      };
      this.getDataList();
    },
    //获取表格数据
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        types: 1,
        ...this.qdForm
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .getData('adm/permission/getRoleList', params)
        .then((data) => {
          loading.close();
          this.tableData = data.resData.data;
          this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    //角色编辑
    editRole(data) {
      console.log(data);
      if (!data) {
        this.roleEdit = {
          name: '',
          description: ''
        };
      } else {
        this.roleEdit = {
          name: data.name,
          description: data.description,
          id: data.id
        };
      }
      this.roleVisible = true;
    },
    memberView(data) {
      this.choiceData = data;
      this.getMemberList();
      this.userListVisible = true;
    },
    getMemberList() {
      this.memberPageInfo.pageindex = 1;
      let params = {
        pageNum: this.memberPageInfo.pageindex,
        pageSize: this.memberPageInfo.pagesize,
        roleId: this.choiceData.id
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .getData('adm/permission/getUserByRoleId', params)
        .then((data) => {
          loading.close();
          this.memberTableData = data.resData.data;
          this.memberPageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    //获取权限弹窗
    roleAuthorization(item) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .getData('adm/permission/getUserPermission', {
          roleId: item.id
        })
        .then((data) => {
          loading.close();
          let choiceMenu = data.resData ? data.resData.split(',') : [];
          let choiceMenuData = [];
          for (let item1 of choiceMenu) {
            if (!this.topMenuKey.includes(item1)) {
              choiceMenuData.push(item1);
            }
          }
          this.choiceMenu1 = choiceMenuData;
          this.choiceMenu2 = choiceMenuData;
          this.choiceData = item;
          this.roleAuthorVisible = true;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    //角色编辑/添加 提交
    roleSubmit() {
      if (!this.roleEdit.name) {
        this.$message({
          message: '请输入角色名称',
          type: 'warning'
        });
        return false;
      }
      let params = {
        ...this.roleEdit,
        types: 1
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/permission/insertOrUpdateUserRole', params)
        .then((data) => {
          loading.close();
          this.getDataList();
          this.roleVisible = false;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    //角色授权 提交
    roleAuthorSubmit() {
      let choiceMenu = this.$refs.menu1
        .getCheckedKeys()
        .concat(this.$refs.menu2.getCheckedKeys());
      let permissions = [];
      choiceMenu = new Set(choiceMenu);
      for (let item of choiceMenu) {
        permissions.push(item);
      }
      let params = {
        permissions: permissions.join(','),
        roleId: this.choiceData.id
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/permission/insertOrUpdateRolePermission', params)
        .then((data) => {
          loading.close();
          this.$message({
            message: '设置成功',
            type: 'success'
          });
          this.roleAuthorVisible = false;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>